<template>
  <div class="security-verification-container">
    <div class="input-title">
      <img src="@/assets/logo_back.png" class="title_back" @click="handleBack" />
      <span class="title_text">本次登录需安全验证</span>
    </div>
    <div class="input-text">
      <!-- 加密手机号 -->
      <p class="text-tips" style="margin: 32px 0 10px">手机号</p>
      <div class="input-name phone-number">
        <span v-for="i in 7" :key="i" class="dot"></span>{{ securityVerificationForm.encryptionPhoneNumber }}
      </div>

      <p class="text-tips" style="margin: 20px 0 10px">短信验证</p>
      <div style="position: relative">
        <input
          class="input-name"
          type="text"
          v-model="messageCode"
          placeholder="请输入短信验证码"
          :class="{ 'input-name-error': !smsCodeInputStatus }"
        />
        <div class="sendCode" @click="sendCode">
          <span v-if="countdown <= 0">发送验证码</span>
          <span v-else>{{ countdown }}秒后可重新获取</span>
        </div>
      </div>
    </div>

    <div class="submit-operate">
      <button class="submit-btn" @click="handleSubmit" :disabled="!messageCode">登录</button>
    </div>
    <!-- 图片验证码弹窗 -->
    <imgCodeModal ref="imgCodeModalRef" @success="handleImgCodeSuccess" />
  </div>
</template>

<script>
  import { loginAuth } from '@/api/user'
  import { Message } from '@arco-design/web-vue'
  import imgCodeModal from './img-code-modal.vue'
  export default {
    components: {
      imgCodeModal,
    },
    props: {
      securityVerificationForm: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeIndex', 'login2GetUser'],
    data() {
      return {
        messageCode: '',
        smsCodeInputStatus: true,
        countdown: 0,
      }
    },
    methods: {
      /**
       * 返回上一步
       */
      handleBack() {
        this.$emit('changeIndex', 1)
      },
      /**
       * 发送短信验证码
       */
      sendCode() {
        if (this.countdown > 0) return
        const param = {
          userName: this.securityVerificationForm.userName,
          password: this.securityVerificationForm.password,
        }
        this.$refs.imgCodeModalRef.open(param, 'securityVerify')
      },
      /**
       * 短信发送成功
       */
      handleImgCodeSuccess() {
        this.countdown = 59 // 立即进入倒计时
        const timer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      },
      /**
       * 登录
       */
      handleSubmit() {
        if (!this.messageCode) {
          Message.warning('请输入短信验证码')
          return
        }
        loginAuth({
          userName: this.securityVerificationForm.userName,
          password: this.securityVerificationForm.password,
          messageCode: this.messageCode,
        }).then((res) => {
          if (res.code == 200) {
            if (res.result.status) {
              this.$emit('login2GetUser')
            } else {
              Message.error(res.result.message)
            }
          }
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .security-verification-container {
    width: 398px;
    margin: 0 auto;
    .input-text {
      .input-name {
        width: 398px;
        height: 50px;
        border-radius: 3px;
        font-size: 14px;
        font-weight: 400;
        opacity: 1;
        border: 1px solid #c5c6cd;
        outline-style: none;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 18px;
      }
      .input-name:focus {
        outline: none;
        border: 1px solid #165dff;
      }
      .input-name-error {
        outline: none;
        border: 1px solid #ff5b5a;
      }
      .phone-number {
        display: flex;
        align-items: center;
        color: #c9cdd4;
        .dot {
          width: 6px;
          height: 6px;
          background-color: #c9cdd4;
          display: inline-block;
          border-radius: 50%;
          margin-right: 2px;
        }
      }
    }
    .submit-operate {
      margin-top: 18px;
      .submit-btn {
        width: 398px;
        height: 50px;
        font-size: 16px;
        color: #ffffff;
        border-radius: 2px 2px 2px 2px;
        background: #165dff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-weight: 400;
        line-height: 1.5715;
        white-space: nowrap;
        outline: none;
        cursor: pointer;
        transition: all 0.1s cubic-bezier(0, 0, 1, 1);
        &:disabled {
          background: rgba(22, 93, 255, 0.3);
        }
      }
    }
    .input-title {
      display: flex;
      align-items: center;
      margin-left: -12px;

      .title_back {
        margin-right: 12px;
        width: 48px;
        height: 48px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      .title_text {
        font-size: 32px;
        font-weight: 600;
        color: #1e1e1e;
      }
    }
    .text-tips {
      height: 22px;
      font-size: 14px;
      font-weight: 400;
      color: #86909c;
      line-height: 22px;
    }
    .error-text {
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff5b5a;
      line-height: 22px;
      margin-top: 11px;
    }
    .sendCode {
      border-left: 1px solid #c5c6cd;
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 14px;
      font-size: 14px;
      height: 50px;
      line-height: 50px;
      font-weight: 400;
      color: #165dff;
      cursor: pointer;
      &:hover {
        font-weight: 500;
      }
    }
  }
</style>
